<template>
  <div>
    <div>
      店铺：<el-checkbox v-model="checkAll" :indeterminate="allIndeterminate" @change="chooseAll">全选</el-checkbox>
    </div>
    <div
      v-for="item in userAccountGroup1"
      :key="item.id"
      class="user-account-group1"
    >
      <div class="left">
        <el-checkbox :label="item.account" v-model="item.check" :indeterminate="item.indeterminate" @change="userCheckAll(item)"></el-checkbox>
      </div>
      <div class="right">
        <el-checkbox
          v-for="account in item.accountList"
          :key="account.id"
          v-model="account.check"
          :label="account.nickname"
          @change="changeGroup1(item,account,$event)"
        >
        </el-checkbox>
      </div>
    </div>
    <div
      class="user-account-group2"
    >
      <el-checkbox v-for="item in userAccountGroup2" :key="item.id" :label="`${item.nickname}(${item.account})`" v-model="item.check" @change="changeValue"></el-checkbox>
    </div>

  </div>
</template>

<script>
import userAccountOptions from "@/views/order/mixin/userAccountOptions";

export default {
  name: "UserAccountCheckBox",
  mixins: [userAccountOptions],
  computed: {
    allIndeterminate(){
      let flag = true;
      if(this.accountIds.length === 0){
        return false;
      }
      let length = 0;
      this.userAccountGroup1.forEach(user => {
        length += user.accountList.length
      })
      length += this.userAccountGroup2.length
      if(this.accountIds.length === length){
        return false;
      }
      return flag
    }
  },
  data(){
    return {
      checkAll: true,
      accountIds: [],
    }
  },
  created() {

  },
  methods:{
    changeGroup1(user,account,$event){
      setTimeout(()=>{
        if(user.check){
          user.accountList.forEach(item=>{
              item.check = false
          })
          account.check = true;
        }
        this.checkIndeterminate(user)
        this.changeValue()

      },0)

    },
    checkIndeterminate(user){
      let flag = user.accountList[0].check;

      user.indeterminate = !(user.accountList.every(item => item.check === flag))

      user.check = user.accountList.every(item => item.check === true);
    },
    userCheckAll(user){
      user.indeterminate = false;
      user.accountList.forEach(item => {
        item.check = user.check;
      })
      this.changeValue()
    },
    changeValue(){
      this.accountIds = [];
      this.userAccountGroup1.forEach( user => {
        user.accountList.forEach(account => {
          if(account.check){
            this.accountIds.push(account.id)
          }
        })
      })
      this.userAccountGroup2.forEach(item => {
        if(item.check){
          this.accountIds.push(item.id)
        }
      })

      this.$emit('input', this.accountIds)
      this.$emit('change', this.accountIds);
    },
    // 选择所有
    chooseAll(){
      this.userAccountGroup1.forEach( user => {
        user.indeterminate = false
        user.check = this.checkAll
        user.accountList.forEach(account => {
          account.check = this.checkAll
        })
      })
      this.userAccountGroup2.forEach(item => {
        item.check = this.checkAll
      })
      this.changeValue()
    }
  }
}
</script>

<style scoped lang="scss">
.user-account-group1{
  margin: 10px 0;
  display: flex;
  .left{
    width: 10%;
    margin-right: 30px;
    overflow: hidden;
    display: inline-block;

  }
  .right{
    display: inline-block;
    width: 80%;
    //line-height: 25px;
  }
}
.user-account-group2{

}
</style>
